<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="item in imgs" :key="item.id">
				<view class="pic">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="text">{{item.comment}}</view>
				<view class="text">{{item.height}}*{{item.width}}</view>
			</view>
			<view v-if="iskey">
				<image src="../../static/images/accessKeyCode.jpg" mode="widthFix"></image>
			</view>
			
		</view>
	</view>
</template>

<script setup>

const imgs = ref([])

const iskey = ref(false)

function network(){
	uni.request({
		url:"https://api.thecatapi.com/v1/images/search",
		data:{
			limit:4
		},
		header:{
			'access-key':"wqh512584164"
		}
	}).then(res=>{
		imgs.value = res.data
	}).catch(()=>{
		iskey.value = true
	})
}

network()


</script>

<style lang="scss" scoped>
	.container {
		.layout {
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					image{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
				}
			}
		}
	}
</style>
